<!-- banner -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>金沙中国有限公司</title>
        <link rel="shortcut icon" href="../images/logo.ico" />
        <link rel="stylesheet" type="text/css" href="../css/index.css">
    </head>
    <body>
        <div class="header">
            <div class="head">
                <h1>
                    <a href="index.html"><img src="../images/logo.png" alt=""></a>
                </h1>
                <ul class="lead">
                    <li><a href="index.html">公司首页</a></li>
                    <li><a href="团队成员.html" target="_blank">公司概览</a></li>
                    <li class="li2"><a href="度假村物业.html" target="_blank">度假村物业</a></li>
                    <li><a href="表现.html" target="_blank">社会责任</a></li>
                    <li class="li2"><a href="常见问题.html" target="_blank">投资者关系</a></li>
                </ul>
                <a class="zhuce" href="../html/注册.html" target="_blank">用户注册</a>
                <img class="nation" src="../images/nation.png" alt="">
                <span>简体中文</span>
            </div>
        </div>
        <div class="banner">
            <div class="pic" id="wit">

                <ul class="gul" id="box">
                    <li class="gli"><img src="../images/gun1.png" alt=""></li>
                    <!-- <li class="gli"><img src="images/gun2.png" alt=""></li>
                    <li class="gli"><img src="images/gun3.jpg" alt=""></li> -->
                    <li class="gli"><img src="../images/gun4.jpg" alt=""></li>
                    <li class="gli"><img src="../images/gun5.jpg" alt=""></li>
                    <li class="gli"><img src="../images/gun6.jpg" alt=""></li>
                    <li class="gli"><img src="../images/gun7.jpg" alt=""></li>
                    <li class="gli"><img src="../images/gun8.jpg" alt=""></li>
                </ul>
                <ol id="list">
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
                <span class="tleft" id="tleft"><</span>
                <span class="tright" id="tright">></span>
            </div>
        </div>
        <div class="txt">
            <p>金沙中国有限公司</p>
        </div>
        <div class="con">
            <ul class="cul">
                <li>
                    <img src="../images/con1.jpg" alt="">
                    <div class="caption">
                        <h2>公司概览</h2>
                        <p>了解金沙中国有限公司如何快速成为领先全球的多用途综合度假村发展商之一。</p>
                    </div>
                </li>
                <li class="cli">
                    <img src="../images/con2.jpg" alt="">
                    <div class="caption">
                        <h2>度假村物业</h2>
                        <p>了解更多本公司旗下的度假村物业项目。</p>
                    </div>
                </li>
                <li class="cli">
                    <img src="../images/con3.jpg" alt="">
                    <div class="caption">
                        <h2>投资者关系</h2>
                        <p>所有公开存档资料的完整清单。</p>
                    </div>
                </li>
                <li class="cli">
                    <img src="../images/con4.jpg" alt="">
                    <div class="caption">
                        <h2>环境</h2>
                        <p>了解本公司的「金沙集团环保360ﾟ」计划。</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="footer">
            <div class="foot">
                <p>集团其它物业: 澳门伦敦人酒店 | 澳门威尼斯人酒店 | 澳门巴黎人酒店 | 澳门金沙城中心 | 澳门金沙度假区</p>
                <p class="p2">© 2021 Sands China Ltd. 金沙中国有限公司（于开曼群岛注册成立的有限公司）。版权所有。</p>
                <a href="">隐私声明</a>
            </div>
        </div>
            <script>
                var box=document.getElementById('box');
                var wit=document.getElementById('wit');
                var list=document.getElementById('list').children;
                var tleft=document.getElementById('tleft');
                var tright=document.getElementById('tright');
                var num=0;
                var timer; 
                function fn(){
                    timer=setInterval(function(){
                    num++;
                    if(num>5){
                        num=0;
                    }
        
                    for(var j=0;j<list.length;j++){
                            list[j].className='';
                        }
                    
                    list[num].className='current';
                    n=-1110*num;
                    box.style.transform='translateX('+n+'px)'
                    box.style.transition='all 2s'
                },3000)
                }
        
                fn()
        
                wit.onmouseenter=function(){
                    clearInterval(timer)
                }
                wit.onmouseleave=function(){
                   fn()
                }
                for(var i=0;i<list.length;i++){
                    list[i].index=i;
                    list[i].onclick=function(){
                        for(var j=0;j<list.length;j++){
                            list[j].className=''
                        }
                        this.className='current';
                        num=this.index;
                    n=-1110*num;
                    box.style.transform='translateX('+n+'px)'
                    box.style.transition='all 2s'
                    }
                }
                tright.onclick=function(){
                    num++;
                    if(num>5){
                        num=0;
                    }
                    for(var j=0;j<list.length;j++){
                            list[j].className='';
                        }
                    
                    list[num].className='current';
                    n=-1110*num;
                    box.style.transform='translateX('+n+'px)'
                    box.style.transition='all 2s'
                }
                tleft.onclick=function(){
                    num--;
                    if(num<0){
                        num=5;
                    }
                    for(var j=0;j<list.length;j++){
                            list[j].className='';
                        }
                    list[num].className='current';
                    n=-1110*num;
                    box.style.transform='translateX('+n+'px)'
                    box.style.transition='all 2s'
                }
            </script>
            
    </body>
</html>